<template>
  <div id="rulesPictureConfig">
    <h1 class="con-right-title">
      转介绍规则图配置
    </h1>
    <div class="rulesPicture">
      <el-form
        ref="ruleForm"
        :rules="rules"
        :model="formData"
        label-width="140px"
      >
        <el-form-item label="合伙人首页长图:" prop="homePicture">
          <uploadSingImg
            :imgUrl="formData.homePicture"
            accept=".jpg,.jpeg,.png,.gif"
            :maxSize="3"
            @getImgUrl="getHomePicture"
            :showDeleteIcon="true"
          >
            <template v-slot:imgInfo
              >建议尺寸宽750PX，支持JPG、PNG、GIF格式，不超过3M</template
            >
          </uploadSingImg>
        </el-form-item>
        <el-form-item label="合伙人规则长图:" prop="partnerRulePicture">
          <uploadSingImg
            :imgUrl="formData.partnerRulePicture"
            accept=".jpg,.jpeg,.png,.gif"
            :maxSize="3"
            @getImgUrl="getPartnerRulePicture"
            :showDeleteIcon="true"
          >
            <template v-slot:imgInfo
              >建议尺寸宽750PX，支持JPG、PNG、GIF格式，不超过3M</template
            >
          </uploadSingImg>
        </el-form-item>
        <el-form-item label="领奖规则长图:" prop="prizeRulePicture">
          <uploadSingImg
            :imgUrl="formData.prizeRulePicture"
            accept=".jpg,.jpeg,.png,.gif"
            :maxSize="3"
            @getImgUrl="getPrizeRulePicture"
            :showDeleteIcon="true"
          >
            <template v-slot:imgInfo
              >建议尺寸宽750PX，支持JPG、PNG、GIF格式，不超过3M</template
            >
          </uploadSingImg>
        </el-form-item>
      </el-form>
      <span class="dialog-footer">
        <el-button type="success" plain @click="cancle">
          取 消
        </el-button>
        <el-button type="success" @click="confirm('ruleForm')">确 认</el-button>
      </span>
    </div>
  </div>
</template>

<script>
import uploadSingImg from '@common/uploadSingImg' // 上传单个图片公共组件
import {
  rulePicture,
  uploaRrulePicture
} from '@/api/partner/rulesPictureConfig'
export default {
  components: {
    uploadSingImg
  },
  data() {
    return {
      formData: {
        homePicture: '',
        partnerRulePicture: '',
        prizeRulePicture: ''
      },
      rules: {
        homePicture: [
          { required: true, message: '请上传合伙人首页长图', trigger: 'change' }
        ],
        partnerRulePicture: [
          { required: true, message: '请上传合伙人规则长图', trigger: 'change' }
        ],
        prizeRulePicture: [
          { required: true, message: '请上传领奖规则长图', trigger: 'change' }
        ]
      }
    }
  },
  mounted() {
    this.getRulePicture()
  },
  methods: {
    /* 获取转介绍规则图 */
    getRulePicture() {
      rulePicture({}, (res) => {
        this.formData = res
      })
    },
    /* 获取合伙人首页长图 */
    getHomePicture(url) {
      this.formData.homePicture = url
    },
    /* 获取合伙人规则长图 */
    getPartnerRulePicture(url) {
      this.formData.partnerRulePicture = url
    },
    /* 获取领奖规则长图 */
    getPrizeRulePicture(url) {
      this.formData.prizeRulePicture = url
    },
    /* 保存 */
    confirm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          uploaRrulePicture(this.formData, () => {
            this.$message.success('上传成功')
            this.getRulePicture()
          })
        }
      })
    },
    //取消
    cancle() {
      this.$router.push('/partner/activityConfig/operationConfig')
    }
  }
}
</script>

<style lang="less" scoped>
.rulesPicture {
  width: 97%;
  height: 100%;
  margin: 25px;
  padding: 10px;
  border: 1px solid #333;
  .dialog-footer {
    width: 130px;
    display: block;
    margin: 0 auto;
  }
}
</style>
